import React from 'react';
import config from '../../assets/js/config/config';
import livePng from '../../assets/images/search/live.png';
import predictPng from '../../assets/images/search/predict.png';
import monitorPng from '../../assets/images/search/monitor.png';
import productPng from '../../assets/images/search/product.png';
import sandPng from '../../assets/images/search/sand.png';
import SearchComponent from '../../component/search/searchComponent';
import Css from './index.less';

class SearchIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list: [
                { text: '实况监测', link: 'live', iconUrl: livePng },
                { text: '预报预测', link: 'predict', iconUrl: predictPng },
                { text: '全流程监控', link: 'monitor', iconUrl: monitorPng },
                { text: '产品服务', link: 'product', iconUrl: productPng },
                { text: '三维沙盘', link: 'sand', iconUrl: sandPng }
            ],
            searchValue: ''
        }
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    //搜索框值改变事件
    inputChange(e){
        this.setState({ searchValue: e.target.value }, () => {

        });
    }

    render(){
        const { list, searchValue } = this.state;
        return (
            <div className={Css['page']}>
                {/* 链接模块 */}
                <div className={Css['list-wrapper']}>
                    {
                        list.length > 0 ? list.map((item, index) => {
                            return (
                                <ul key={index}>
                                    <li><img src={item.iconUrl} alt="loading" /></li>
                                    <li onClick={() => this.goPage(item.link)}>{item.text}</li>
                                </ul>
                            )
                        }) : ''
                    }
                </div>
                {/* 主标题 */}
                <div className={Css['title']}>
                    <img src={require('../../assets/images/search/title.png')} alt="loading" />
                </div>
                {/* 搜索栏模块 */}
                <SearchComponent 
                    value={searchValue}
                    sInputChange={(e) => this.inputChange(e)}
                ></SearchComponent>
                {/* 登陆设置 */}
                <>
                    <div className={Css['set-text']}>设置</div>
                    <div className={Css['login-btn']}>登录</div>
                </>
            </div>
        )
    }
}

export default SearchIndex;